import QtQuick 2.0

Item {
    property int duration: 3000;

    id: root;

    Rectangle {
        id: sky
        width: parent.width
        height: 200
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#0080FF" }
            GradientStop { position: 1.0; color: "#66CCFF" }
        }
    }

    Rectangle {
        id: ground
        anchors.top: sky.bottom
        anchors.bottom: root.bottom
        width: parent.width
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#00FF00" }
            GradientStop { position: 1.0; color: "#00803F" }
        }
    }

    Image {
        id: ball;
        x: 0; y: root.height-height;
        source: "rec/rec/image/soccer_ball.png";

        MouseArea {
            anchors.fill: parent;
            onClicked: {
                ball.x = 0;
                ball.y = root.height-ball.height;
                ball.rotation = 0;
                anima.restart();
            }
        }
    }

    ParallelAnimation {
        id: anima;

        SequentialAnimation {
            NumberAnimation {
                target: ball;
                property: "y";
                to: 20;
                duration: root.duration*0.4;
            }

            NumberAnimation {
                target: ball;
                property: "y";
                to: root.height-ball.height;
                duration: root.duration*0.6;
            }
        }


        NumberAnimation {
            target: ball;
            property: "x"
            to: root.width-ball.width;
            duration: root.duration;
        }

        RotationAnimation {
            target: ball;
            property: "rotation"
            to: 720*10;
            duration: root.duration;
        }

    }

}
